<%@ include file="../common/top.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div id="Catalog" >
    <form action="changeMyAccount" method="post" class="user-form">
            <div class="user-form-error">
                <p class="error-msg"><font color="red" id="error-msg"></font></p>
            </div>
        <h3>User Information</h3>

        <div class="user-form-item">
            <label for="username" class="user-form-label">
                <i class="fa-solid fa-user"></i>
            </label>
            <input type="text" readonly="readonly" class="user-form-input" name="username" id="username" placeholder="username" autocapitalize="off" value="${sessionScope.loginAccount.username}">
        </div>
        <div class="user-form-item">
            <label for="password" class="user-form-label">
                <i class="fa-solid fa-lock"></i>
            </label>
            <input type="password" class="user-form-input" name="password" id="password" placeholder="password" autocapitalize="off">
        </div>
        <div class="user-form-item">
            <label for="repeatPassword" class="user-form-label">
                <i class="fa-solid fa-lock"></i>
            </label>
            <input type="password" class="user-form-input" name="repeatPassword" id="repeatPassword" placeholder="repeatPassword" autocapitalize="off">
        </div>
        <h3>Account Information</h3>

        <div class="user-form-item">
            <label for="firstname" class="user-form-label">
                <i class="fa-solid fa-signature"></i>
            </label>
            <input type="text" class="user-form-input" name="firstname" id="firstname" placeholder="firstname" autocapitalize="off"value="${sessionScope.loginAccount.firstName}">
        </div>
        <div class="user-form-item">
            <label for="lastname" class="user-form-label">
                <i class="fa-solid fa-signature"></i>
            </label>
            <input type="text" class="user-form-input" name="lastname" id="lastname" placeholder="lastname" autocapitalize="off"value="${sessionScope.loginAccount.lastName}">
        </div>
        <div class="user-form-item">
            <label for="email" class="user-form-label">
                <i class="fa-solid fa-envelope"></i>
            </label>
            <input type="text" class="user-form-input" name="email" id="email" placeholder="email" autocapitalize="off"value="${sessionScope.loginAccount.email}">
        </div>
        <div class="user-form-item">
            <label for="country" class="user-form-label">
                <i class="fa-solid fa-globe"></i>
            </label>
            <input type="text" class="user-form-input" name="country" id="country" placeholder="country" autocapitalize="off"value="${sessionScope.loginAccount.country}">
        </div>
        <div class="user-form-item">
            <label for="state" class="user-form-label">
                <i class="fa-solid fa-address-card"></i>
            </label>
            <input type="text" class="user-form-input" name="state" id="state" placeholder="state" autocapitalize="off"value="${sessionScope.loginAccount.state}">
        </div>
        <div class="user-form-item">
            <label for="city" class="user-form-label">
                <i class="fa-solid fa-city"></i>
            </label>
            <input type="text" class="user-form-input" name="city" id="city" placeholder="city" autocapitalize="off"value="${sessionScope.loginAccount.city}">
        </div>
        <div class="user-form-item">
            <label for="address1" class="user-form-label">
                <i class="fa-solid fa-location-dot"></i>
            </label>
            <input type="text" class="user-form-input" name="address1" id="address1" placeholder="address1" autocapitalize="off"value="${sessionScope.loginAccount.address1}">
        </div>
        <div class="user-form-item">
            <label for="address2" class="user-form-label">
                <i class="fa-solid fa-location-dot"></i>
            </label>
            <input type="text" class="user-form-input" name="address2" id="address2" placeholder="address2" autocapitalize="off"value="${sessionScope.loginAccount.address2}">
        </div>
        <div class="user-form-item">
            <label for="zip" class="user-form-label">
                <i class="fa-brands fa-codepen"></i>
            </label>
            <input type="text" class="user-form-input" name="zip" id="zip" placeholder="zip" autocapitalize="off"value="${sessionScope.loginAccount.zip}">
        </div>
        <div class="user-form-item">
            <label for="phone" class="user-form-label">
                <i class="fa-solid fa-phone"></i>
            </label>
            <input type="text" class="user-form-input" name="phone" id="phone" placeholder="phone" autocapitalize="off"value="${sessionScope.loginAccount.phone}">
        </div>

        <h3>Profile Information</h3>
        <div class="user-form-item">
            <label for="favcategory" class="user-form-label">
                <i class="fa-solid fa-cat"></i>
            </label>
            <select class="combo" id="favcategory" style="width: auto" name="favcategory"value="${sessionScope.loginAccount.favouriteCategoryId}">
                <option value="not" ></option>
                <option value="CATS">CATS</option>
                <option value="DOGS">DOGS</option>
                <option value="FISH">FISH</option>
                <option value="REPTILES">REPTILES</option>
                <option value="BIRDS">BIRDS</option>
            </select>
        </div>
        <div class="user-form-item">
            <input type="submit" value="change" class="user-form-submit" id="change">
        </div>
<%--        <table>--%>
<%--            <tr>--%>
<%--                <td>Language Preference:</td>--%>
<%--                <td><stripes:select name="account.languagePreference">--%>
<%--                    <stripes:options-collection collection="${actionBean.languages}" />--%>
<%--                </stripes:select></td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>Favourite Category:</td>--%>
<%--                <td><stripes:select name="account.favouriteCategoryId">--%>
<%--                    <stripes:options-collection collection="${actionBean.categories}" />--%>
<%--                </stripes:select></td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>Enable MyList</td>--%>
<%--                <td><stripes:checkbox name="account.listOption" /></td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>Enable MyBanner</td>--%>
<%--                <td><stripes:checkbox name="account.bannerOption" /></td>--%>
<%--            </tr>--%>

<%--        </table>--%>

<%--        <stripes:submit name="editAccount" value="Save Account Information" />--%>

    </form>


</div>

<%@ include file="../common/bottom.jsp" %>
<script src="js/changeAccount.js"></script>